.benefits {
  // padding: 120px 0; - по макету
  // Для плавного изменения при адаптиве от 120px до 60px
  padding: clamp(60px, 2.386rem + 6.82vw, 120px) 0;
}

.benefits__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;

  // Подключается (в файле _vars.scss) миксин для ширины экрана 992px
  @include tablet {
    grid-template-columns: repeat(2, 1fr);

    // Прописываем, чтобы при уменьшении ширины экрана количество колонок перестраивалось сначало на 2, потом на одну. Есть баг. На ширине экрана 320px появляется горизонтальный скрол, т.к. контейнер равен 290px, а колонка шириной 309px/
    // grid-template-columns: repeat(auto-fit, minmax(309px, 1fr));

    // Для плавного изменения при адаптиве от 60px до 30px
    gap: clamp(30px, 0.982rem + 4.46vw, 60px) 20px;
  }

     // Подключается (в файле _vars.scss) миксин для ширины экрана 630px
  @include mobile {
    grid-template-columns: 1fr;
  }
}

.benefits__title {
  padding-top: 38px;
  max-width: 260px;
  // font-size: 42px; - по макету
  font-size: clamp(32px, 1.702rem + 1.49vw, 42px);
  font-weight: 700;

  @include tablet {
    padding-top: 0;
  }
}